import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import screen from '../../../../common/screen'
import { Title, Description, ImagePrice, SaleNum, Earn } from '../../../../widget/Text'
import LinearGradient from 'react-native-linear-gradient'
import { BoxShadow } from 'react-native-shadow'
type Props = {
    info: Object,//商品信息
    OnPress: Function,//点击商品事件
}

class HotProductItem extends PureComponent<{}>{
    render() {
        let info = this.props.info
        return (
            //  onPress={()=>this.props.OnPressItem(info.id)}
            <BoxShadow setting={shadowOpt}>
                <TouchableOpacity style={styles.contain} onPress={() => this.props.OnPress(info.id)}>
                    {/*商品图片*/}
                    <Image style={styles.image} resizeMode='contain' source={{ uri: info.imageUrl, cache: 'force-cache' }} />
                    {/*商品信息*/}
                    <View style={styles.textView}>
                        <Title numberOfLines={1}>{info.title}</Title>
                        <Description>{info.description}</Description>

                        <ImagePrice>¥{info.price}</ImagePrice>

                    </View>
                </TouchableOpacity>
            </BoxShadow>
        );
    }
}

const shadowOpt = {
    width: screen.width * 0.306,
    height: screen.width * 0.416,
    color: "#626262",
    border: 2,
    radius: 6,
    opacity: 0.25,
    x: 2,
    y: 2,
    style: {marginBottom: 6, }
}


const styles = StyleSheet.create({
    //最外面的布局
    contain: {
        position:'relative',
        width: screen.width * 0.306,
        height: screen.width * 0.416,
        alignItems: 'center',
        borderRadius: 6,
        backgroundColor:'#FFFFFF',
        overflow:'hidden',
       // elevation: 2,
        //   marginRight:4,
        
    },
    //图片本身
    image: {
        width: screen.width * 0.194,
        height: screen.width * 0.194,
        marginTop: screen.width * 0.033,

    },
    textView: {
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        marginLeft: screen.width * 0.031,
        marginRight: screen.width * 0.031,
    },
    memberPrice: {
        width: screen.width * 0.10,
        height: screen.width * 0.040,
        marginRight: 5,
    },
    newImage: {
        width: screen.width * 0.125,
        height: screen.width * 0.125,
        marginTop: 2,
        marginLeft: screen.width * 0.039,
    }

})
export default HotProductItem